.ui-avatar-group {
  display: flex;
  flex-wrap: no-wrap;
  z-index: 1;
  position: relative;
}

/*
 * We use a box shadow here rather than a border to ensure
 * that when an avatar group is aligned next to a non-grouped
 * avatar, the sizes will still remain consistent
 */

.ui-avatar-group__chip {
  background-color: var(--grey100);
  border: 2px solid var(--grey400);
  color: var(--grey800);
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.7em;
}

.ui-avatar-group .ui-avatar {
  margin-left: -0.45em;
  box-shadow: 0 0 0 2px var(--white);
}

.ui-avatar-group .ui-avatar.ui-avatar--large,
.ui-avatar-group .ui-avatar.ui-avatar--extra-large {
  box-shadow: 0 0 0 3px var(--white);
}

.ui-avatar-group .ui-avatar.ui-avatar--large,
.ui-avatar-group .ui-avatar.ui-avatar--extra-large {
  border: 3px solid var(--white);
}

.ui-avatar-group .ui-avatar:nth-of-type(1) {
  z-index: 5;
}

.ui-avatar-group .ui-avatar:nth-of-type(2) {
  z-index: 4;
}

.ui-avatar-group .ui-avatar:nth-of-type(3) {
  z-index: 3;
}

.ui-avatar-group .ui-avatar:nth-of-type(4) {
  z-index: 2;
}

.ui-avatar-group .ui-avatar:nth-of-type(5) {
  z-index: 1;
}

.ui-avatar-group .ui-avatar:first-of-type {
  margin-left: 0;
}